<!-- <template>
  <section>
    <table class="table"
           border="0">
      <tr>
        <th :style="{textAlign:item.align||'left',width:item.width+'px'||'auto'}"
            v-for="(item,index) in options.config"
            :key="index">{{item.label}}</th>
      </tr>
      <tr v-for="(item,index) in list"
          :key="index">
        <td :style="{'textAlign':`${page.align || 'left'}`,width:page.width+'px'||'auto','transform':`scale(${page.scale||1})`}"
            v-for="(page,pageIndex) in options.config"
            :key="pageIndex">
          {{item[page.props]}}
        </td>
      </tr>
      <tr v-if="showSummary">
        <td :colspan="options.config.length"
            :style="{'textAlign':`${summary.align || 'left'}`,'transform':`scale(${summary.scale||1})`}">{{ summary.title || '合计金额：' }}{{ order[summary.props?[summary.props]:'summary'] }}</td>
      </tr>
    </table>
  </section>
</template> -->
<script>
export default {
  name: "ym-print-table",
  props: {
    data: {
      type: Array,
      default: []
    },
    options: {
      type: Object,
      default: {
        config: [],
      }
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    summary: {
      type: Object,
      default: () => ({})
    },
    order: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      list: this.data,
      labelOpts: []
    }
  },
  watch: {
    data (v) {
      this.list = v
    }
  },
  render (h) {
    return <table class="table" border="0">
      <tr>
        {
          this.options.config.map((item, itemIndex) => {
            return <th key={itemIndex} style={{ textAlign: item.align || 'left', width: item.width + 'px' || 'auto' }}>{item.label}</th>
          })
        }
      </tr>
      {
        this.list.map(item => {
          return <tr>
            {
              this.options.config.map((page, pageIndex) => {
                return <td key={pageIndex} style={{
                  textAlign: page.align || 'left',
                  width: page.width ? page.width + 'px' : 'auto',
                  transform: `scale(${page.scale || 1})`,
                }}>
                  {
                    page.render ? page.render(h, item)
                      : item[page.props]
                  }
                </td>
              })
            }
          </tr>
        })
      }

      {
        this.showSummary ? <tr>
          <td colspan={this.options.config.length}
            style={
              {
                textAlign: this.summary.align || 'left',
                transform: `scale(${this.summary.scale || 1})`,
              }
            }>{this.summary.title || '合计金额：'}{this.order[this.summary.props ? [this.summary.props] : 'summary']}</td>
        </tr> : null
      }
    </table>
  },

}
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  border: 0.5px solid #000;
  margin-top: 6px;
  tr {
    // line-height: 26px;
    // padding: 8px 0;
    border-bottom: 0.5px solid #000;
    &:last-child {
      border-bottom: 0;
    }
  }
  th,
  td {
    font-size: 14px;
    border-right: 0.5px solid #000;
    padding: 6px 2px;
    height: 23px;
    box-sizing: border-box;
    transform: scale(0.83);
    color: #000;
    &:last-child {
      border-right: 0;
    }
  }
  td {
    font-size: 12px;
    transform: scale(0.83);
  }
}
</style>
